<template>
	<div class="add-sence">
		<el-dialog title="新增业务场景" :visible.sync="showAddScene" width="35%" :before-close="closeAddScene">
			<div class="add-content">
				<el-form :model="from" :rules="rules" ref="sceneFrom" label-width="120px" class="demo-ruleForm">
					<el-form-item label="业务场景名称" prop="name">
						<el-input v-model="from.name"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button class="close" @click="closeAddScene">关 闭</el-button>
				<el-button class="sure" @click="sureAddScene">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { mapState } from 'vuex';
import { validateSceneName } from '@/utils/formValidate';
export default {
	props: {
		showAddScene: {
			type: Boolean,
			required: true,
			default: () => false
		}
	},
	data() {
		const vaildateRepeats = (rule, value, callback) => {
			let arr = this.sceneList.filter(item => item.sceneName === value);
			if (arr.length !== 0) {
				return callback(new Error('* 该名称已被使用，请尝试别的名称!'));
			}
			return callback();
		};
		return {
			rules: {
				name: [
					{ required: true, message: '请输入业务场景名称', trigger: 'blur' },
					{ validator: validateSceneName, trigger: ['blur'] },
					{ validator: vaildateRepeats, trigger: 'blur' }
				]
			},
			from: {
				name: '',
				limit: 10
			}
		};
	},
	computed: {
		...mapState({
			sceneList: state => state.sceneInfo.sceneList
		})
	},
	methods: {
		closeAddScene() {
			this.$refs.sceneFrom.resetFields();
			this.$emit('closeAddScene');
		},
		vaildateRepeats(e) {
			console.log(e);
		},
		sureAddScene() {
			let data = {};
			data.name = this.from.name;
			console.log(data);
			this.$refs.sceneFrom.validate(valid => {
				if (valid) {
					this.$emit('sureAddScene', data);
					this.$refs.sceneFrom.resetFields();
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style lang="less">
.add-sence {
	.el-dialog__body {
		padding: 10px 20px;
	}
	.el-input {
		input {
			height: 32px;
		}
	}
}
</style>

<style lang="less" scoped>
.add-sence {
	.el-button {
		width: 56px;
		height: 32px;
		padding: 0;
		font-size: 14px;
	}
	.close {
		color: #999;
	}
	.sure {
		background-color: #6384fe;
		color: #fff;
	}
	.error {
		position: absolute;
		top: 104px;
		padding-left: 140px;
		color: #ff3b30;
	}
}
</style>
